<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <link rel="stylesheet" href="../../css/api.css">
      <link rel="stylesheet" href="../../css/base_bai/base.css">
      <title>商品列表</title>

      <style>
      img{    display: block;}
        html, body{font-size: 100%;background: #F5F5F5}
      .van-nav-bar .van-icon{color:black;}
      .van-tabs__wrap--scrollable .van-tab{    flex: 0 0 20%;}
      .van-tab{color:black}




      [t_img]{padding: .5rem}
      [t_img] img{width: 100%;border-radius: .5rem}


      .goods_list{display: flex;    flex-wrap: wrap;justify-content: center;}
      .goods_list>div{width: 45%;padding: 2%}
      .goods_list [title]{display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;overflow: hidden;font-size: 0.9rem;margin: .5rem 0}
      .goods_list [other]>span:nth-child(1){color:#FF540A;font-size: 0.7rem}
        .goods_list [other]>span:nth-child(2){color:#979899}
      .goods_list b{color:#FF540A;font-size: 0.9rem}
      .goods_list img{width: 100%;border-radius: .3rem;}


      .goods_two{display: flex;justify-content: center;align-items: center;padding: .8rem 0;    border-bottom: 1px solid #f3f3f3;}
      .goods_two>div{flex:1;text-align: center;font-size: .9rem}
      .goods_two .on{color:rgb(255, 153, 0)}
      </style>
  </head>
  <body>
  <div id="app" v-cloak>

    <div>
        <van-nav-bar class="m-header" title="全部" left-arrow @click-left="  closeWin()" />
    </div>


  <div>
    <van-tabs v-model="active"  swipe-threshold="5" swipeable color="#FF9900" title-active-color="#FF9900">
    <van-tab title="时尚女装">
      <div  t_img><img src="../../image/goods_goods_list_1.png"/></div>
        <div style="background-color:white">
          <div class="goods_two">
            <div class="on" @click="type_c($event)">热门</div>
            <div @click="type_c($event)">上新</div>
            <div @click="type_c($event)">推荐</div>
            <div @click="type_c($event)">价格</div>
          </div>
          <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >
              <div class="goods_list">
                <div class="goods_1"  v-for="item in list" :key="item"  :title="item" @click=' openWin("goods_list_detail", "goods_list_detail")' >
                        <div><img src="../../image/goods_goods_list_2.png" /></div>
                        <div title>2019夏季新款挂脖小性感长 袖外套背心配高腰浅色牛</div>
                        <div other><span>¥<b> 89.9</b></span><span style="float: right;">已售5403</span></div>
                </div>
              </div>
          </van-list>
        </div>
    </van-tab>
    <van-tab title="男装">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >


        </van-list>
    </van-tab>
    <van-tab title="潮鞋">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >

        </van-list>

    </van-tab>
    <van-tab title="名表">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >


        </van-list>
    </van-tab>
    <van-tab title="洗护">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >


        </van-list>

    </van-tab>
    <van-tab title="食品">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >


        </van-list>

    </van-tab>
    <van-tab title="保健品">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >

          <div class="order_info"  v-for="item in list" :key="item"  :title="item" >
              <div class="order_title">
                  <div><img src="../../image/center_order_list_1.png"  style="width:2rem"/>商户名称</div>
                  <div>订单号：546566565665645565</div>
              </div>
              <div class="order_cont">
                  <div  shop_img><img src="../../image/center_order_list_2.png"  style="width:6.25rem"/></div>
                  <div  cont >
                    <div>北欧小户型布艺沙发客厅双人三人简约风格沙发日式小沙发组合ins质</div>
                    <div>
                      <div style="color:#979899">x1</div>
                      <div cont_font>
                        <span>¥ 679.9</span>共1件商品 合计:<span style="font-weight: 600;color:black ">¥ 679.9</span>
                      </div>
                  </div>
                  </div>
              </div>
              <div class="but_sty">
                <van-button sub_but @click="openWin('comment','comment',{})">立即评价</van-button>
              </div>
          </div>
        </van-list>

    </van-tab>

  </van-tabs>
  </div>



  </div>
  </body>
  <script src="../../script/api.js"></script>
  <script src="../../script/base_bai/vue.js"></script>
  <script src="../../script/base_bai/vant.js"></script>
  <script src="../../script/base_bai/base.js"></script>
  <script src="../../script/base_bai/temp.js"></script>
  <script type="text/javascript">
      apiready = function(){
          headerH = $api.fixStatusBar($api.byId('app'));
        Vue.prototype.$ac = api;
        initVue()
      };
      if (BrowserType() == 'pc') {
          initVue()
      }
      function initVue() {
          new Vue({
              el: '#app',
            // data: temp.center.order_list,
            data:{
               active: 0,
              list: [],
              loading: false,
              finished: false
            },
            methods: {
              onLoad() {

                // 异步更新数据
                setTimeout(() => {
                  for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                  }
                  // 加载状态结束
                  this.loading = false;

                  // 数据全部加载完成
                  if (this.list.length >= 40) {
                    this.finished = true;
                  }
                }, 500);
              },
              type_c(elem){

              var arry_list=  document.getElementsByClassName("goods_two")[0].getElementsByTagName("div");

              for(var i=0;i<arry_list.length;i++){
                arry_list[i].classList='';
              }

                elem.target.classList="on";
              }
            }

          })
      }
  </script>
  </html>
